<template>
  <view class="flex-center" style="gap: 12rpx">
    <view style="max-width: 120rpx;">
      <input :value="leftValue" @input="onLeftInput" @blur="onLeftBlur" type="number" class="paper-input"/>
    </view>
    <view>~</view>
    <view style="max-width: 120rpx">
      <input :value="rightValue" @input="onRightInput" @blur="onRightBlur" type="number" class="paper-input"/>
    </view>
    <view>{{ otherLang.page }}</view>
  </view>
</template>

<script>
export default {
  emits: ['blur'],
  props: {
    pageSize: {
      type: Number,
      default: 1,
      required: true
    },
  },
  data() {
    return {
      leftValue: 1,
      rightValue: 0,
      maxValue: 0,
    };
  },
  watch: {
    pageSize: {
      immediate: true,
      handler(newVal) {
        this.rightValue = newVal;
        this.maxValue = newVal;
      }
    }
  },
  methods: {
    // 左输入框输入
    onLeftInput(e) {
      this.leftValue = parseInt(e.detail.value)
    },
    // 左输入框失去焦点
    onLeftBlur() {
      let value = this.leftValue

      if (value <= 1 || isNaN(value)) {
        value = 1
      }

      if (value >= this.rightValue) {
        value = this.rightValue
      }
      this.leftValue = value
      this.$emit('blur', {leftValue: this.leftValue, rightValue: this.rightValue})
    },
    // 右输入框输入
    onRightInput(e) {
      this.rightValue = parseInt(e.detail.value)
    },
    // 右输入框失去焦点
    onRightBlur() {
      let value = this.rightValue

      if (value <= 1 || isNaN(value)) {
        value = 1
      }

      if (value >= this.maxValue) {
        value = this.maxValue
      }

      if (value <= this.leftValue) {
        value = this.leftValue
      }

      this.rightValue = value
      this.$emit('blur', {leftValue: this.leftValue, rightValue: this.rightValue})
    }
  }
}
</script>
<style lang="scss" scoped>
.paper-input {
  height: 56rpx;
  border-radius: 14rpx;
  text-align: center;
  border: 4rpx solid #e6e6e6;

  &:focus {
    border-color: #409eff;
  }
}

</style>